<template>
  <div class="search-params f-r a-c j-b">
    <el-form inline>
      <el-form-item v-for="item in searchList" :key="item.label" :label="item.label">
        <el-select clearable v-if="item.name === 'select'" v-model="searchParams[item.key]" :multiple="item.multiple" @change="val => $emit('change', {
          key: item.key,
          val
        })" placeholder="请选择">
          <el-option
            v-for="optionItem in item.options"
            :key="optionItem.value"
            :value="optionItem.value"
            :label="optionItem.name"
          />
        </el-select>
        <el-input clearable v-if="item.name === 'input'" v-model="searchParams[item.key]" placeholder="请输入" />
        <el-date-picker
            clearable
          v-if="item.name === 'datetime'"
          v-model="searchParams[item.key]"
            :type="item.dateType"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :value-format="item.valueFormat || 'yyyy-MM-dd'"
          :style="{width: item.width ||  '450px'}"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button v-if="searchList.length" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    searchList: {
      type: Array,
      default: () => []
    },
    searchParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    onSearch() {
      this.$emit('search')
    },
    onReset() {
      this.$emit('reset')
    }
  }
}
</script>

<style scoped lang="scss">
.search-params {
  .el-form {
    width: 100%;
  }
}
</style>
